<template>
  <div>
    <!-- 面包屑区域   -->
    <a-breadcrumb separator=">" class="a-breadcrumb">
      <a-breadcrumb-item>首页</a-breadcrumb-item>
      <a-breadcrumb-item href="">
        选课中心
      </a-breadcrumb-item>

    </a-breadcrumb>
    <!--  筛选区域  -->
    <div class="main">
      <div class="left">
        <div class="left-time">
          陪伴时间:
          <!--    陪伴时间单选框      -->
          <a-radio-group default-value="a" button-style="solid" v-model:value="Selectedtime">
            <a-radio-button :value="item.value" :key="index" v-for="(item,index) in time">{{item.label}}
            </a-radio-button>
          </a-radio-group>
        </div>
        <div class="left-area">
          地区:
        <!--    地区下拉框      -->
            <a-select
                style="width: 120px"
                placeholder="未选择区域"
                v-model:value="Selectedarea"
                @change="handleChange"
            >
              <a-select-option  :value="item.value" :key="index" v-for="(item,index) in area">{{item.label}}</a-select-option>
            </a-select>
        </div>
        <!--   价格的筛选     -->
        <div class="left-price">
          价格:
          <a-radio-group default-value="a" button-style="solid" v-model:value="Selectedprice">
            <a-radio-button :value="item.value" :key="index" v-for="(item,index) in price">{{item.label}}
            </a-radio-button>
          </a-radio-group>
        </div>
      </div>
      <div class="right">
        <!--   教师等级单选框     -->
        教师等级:
        <a-radio-group default-value="a" button-style="solid" v-model:value="Selectedlevel">
          <a-radio-button :value="item.value" :key="index" v-for="(item,index) in level">{{item.label}}</a-radio-button></a-radio-group>
      </div>
    </div>
    <!--  筛选教师列表  -->
    <div class="teacher-list">
      <a-list
          :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 4, xxl: 3, xxxl: 2 }"
          :data-source="TeacherList"
      >
<!--      <div style="padding-top: 30px; padding-bottom: 20px">-->
<!--      <a-row>-->
<!--        <a-col :xs="{ span: 3, offset: 1 }" :lg="{ span: 3, offset: 2 }">-->
<!--          <a-card hoverable style="width: 250px">-->
<!--            <a-card-meta>-->
<!--              <template #title>标题:</template>-->
<!--              <template #description><history-outlined />时间:</template>-->
<!--            </a-card-meta>-->
<!--            <a-avatar size="large" style="margin-top: 22px">-->
<!--              <template #icon><UserOutlined /></template>-->
<!--            </a-avatar>-->
<!--            <div style="position:relative;margin-left: 180px;margin-top: 40px;font-weight: bold">-->
<!--              ￥起-->
<!--            </div>-->
<!--          </a-card>-->
<!--        </a-col>-->
<!--      </a-row></div>-->
        <template #renderItem="{ item }">
          <a-list-item>
            <a-card :title="item.course_name">
              <div><history-outlined />时间:星期{{item.week_day}}</div>
              <div> {{item.start_time}}</div>
              <a-avatar size="large" style="margin-top: 22px">-->
                <template #icon><UserOutlined /></template>
              </a-avatar>
              <div style="margin-top: 40px;font-weight: bold">
                {{item.unit_price}}￥起</div>
            </a-card>
          </a-list-item>
        </template>
        <!-- 筛选教师列表分页  -->
        <div class="pagination"><a-pagination :total="total" show-less-items :pageSize="4"/></div>
      </a-list>
    </div>
  </div>
</template>

<script>
import axios from "axios";
// import {formatDate} from '../components/date';
export default {
  name: "CourseSelected",
  data(){
    return{
      price:[{value:'从高到低',label:'从高到低'},{value: '从低到高',label: '从低到高'},],
      time:[{value:'放学后',label:'放学后'},{value: '周末',label: '周末'},{value: '其他',label: '其他'}],
      level:[{value:'金牌',label:'金牌'},{value: '银牌',label: '银牌'},{value: '铜牌',label: '铜牌'}],
      area:[{value:'临平区',label:'临平区'},{value: '滨江区',label: '滨江区'},{value: '上城区',label: '上城区'}],
      Selectedarea:undefined,
      Selectedtime:"",
      Selectedlevel:"",
      Selectedprice:"",
      TeacherList:[],
      total:0,
    }
  },
  methods:{
    handleChange(){
      console.log(this.Selectedarea);
    },
    async getTeacherList(){
      const {data:res} = await axios.get("user/selectDefaultCourse")
      console.log(res);
      if (res.code == 200)
        console.log("1");
      this.TeacherList = res.datapages.page.items
      this.total = res.datapages.page.totalCount
    },
  },
  created() {
    this.getTeacherList()
  }
}
</script>

<style scoped>
.main{
  display: flex;
  margin-top: 40px;
}
.left{
  width: 50%;
  margin-left: 300px;
}
.right{
  width: 50%;
  margin: 0 auto;
}
.left-area{
  margin-top: 30px;
  margin-bottom: 30px;
}
.teacher-list{
  width: 80%;
  margin: 0 auto;
  margin-top: 60px;
}
.pagination{
  margin: 0 auto;
  width: 100%;
}
</style>
